<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
<body>
    <div></div>
    <script>
        // 事件对象  
        // 当事件行为发生的时候，
        //会自动创建一个事件对象，
        // 事件对象中包含了事件行为的信息(浏览器主动记录下来)
        // 记录的是本次事件所有的相关信息  


        // 我门想获取这些信息  必须先拿到事件对象 
        // 事件三要素 
        // 事件源 
        // 事件类型
        // 事件处理函数


        // 如何拿到事件对象 
        // w3c标准  
        // 再书写事件处理函数的时候，写一个形参 
        // 事件处理函数的自动传递实参 
        // 事件对象就是实参

        // 例子
        // 事件源.onclick = function(event){}


        // ie浏览器 

        // window.event


        var ele = document.querySelector('div');
        ele.onclick = function(e){
            // console.log(e);

            // 浏览器的兼容性问题

            e = e || window.event;
            console.log(e);
            // e.clientX  鼠标相对于浏览器窗口的x坐标
            // e.clientY  鼠标相对于浏览器窗口的y坐标
        }

    </script>
</body>
</html>